<template>
  <div class="resource-management-container">
    <div class="management-card">
      <div class="header-section">
        <h1 class="title">资源申请管理</h1>
        <div class="decorative-line"></div>
      </div>

      <el-table
          :data="applications"
          v-loading="loading"
          stripe
          style="width: 100%"
          class="data-table"
      >
        <el-table-column prop="username" label="申请人" width="120" />
        <el-table-column prop="projectName" label="项目" width="180" />
        <el-table-column prop="resourcesType" label="类型" width="120">
          <template slot-scope="{row}">
            <el-tag :type="resourceTypeStyle(row.resourcesType)">
              {{ resourceTypeText(row.resourcesType) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="金额" width="150">
          <template slot-scope="{row}">
            <span v-if="row.resourceType === '资金'">
              ¥{{ row.amount.toLocaleString() }}
            </span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="describes" label="申请描述" />
        <el-table-column label="操作" width="180">
          <template slot-scope="{row}">
<!--            <el-button-->
<!--                size="mini"-->
<!--                type="primary"-->
<!--                @click="showEditDialog(row)"-->
<!--            >编辑</el-button>-->
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog
          title="编辑资源申请"
          :visible.sync="editDialogVisible"
          width="600px"
      >
        <el-form :model="currentEdit" label-width="100px">
          <el-form-item label="申请人">
            <el-input v-model="currentEdit.applicant" />
          </el-form-item>
          <el-form-item label="项目">
            <el-select v-model="currentEdit.projectId">
              <el-option
                  v-for="p in projectOptions"
                  :key="p.id"
                  :label="p.projectName"
                  :value="p.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="资源类型">
            <el-select v-model="currentEdit.resourceType">
              <el-option
                  v-for="t in resourceTypes"
                  :key="t.value"
                  :label="t.label"
                  :value="t.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="金额" v-if="currentEdit.resourceType === '资金'">
            <el-input-number
                v-model="currentEdit.amount"
                :min="100"
                :precision="2"
                style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="描述">
            <el-input
                type="textarea"
                v-model="currentEdit.description"
                :rows="4"
            />
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitEdit">保存</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      applications: [],
      loading: false,
      editDialogVisible: false,
      currentEdit: {},
      projectOptions: [],
      resourceTypes: [
        { label: '资金', value: 'FUNDING' },
        { label: '指导', value: 'MENTORSHIP' },
        { label: '办公空间', value: 'OFFICE_SPACE' }
      ]
    };
  },
  created() {
    this.fetchApplications();
    this.fetchProjects();
  },
  methods: {
    async fetchApplications() {
      try {
        this.loading = true;
        this.$request.get('/admin/selectResource2')
            .then(res=>{
              this.applications=res.data
            })
      } catch (error) {
        this.$message.error('加载申请列表失败');
      } finally {
        this.loading = false;
      }
    },

    resourceTypeText(type) {
      return this.resourceTypes.find(t => t.value === type)?.label || type;
    },
    resourceTypeStyle(type) {
      const map = {
        FUNDING: 'success',
        MENTORSHIP: 'warning',
        OFFICE_SPACE: 'info'
      };
      return map[type] || '';
    },
    showEditDialog(app) {
      this.currentEdit = { ...app };
      this.editDialogVisible = true;
    },
    async submitEdit() {
      try {
        await this.$request.put(`/api/resources/${this.currentEdit.id}`, this.currentEdit);
        this.$message.success('更新成功');
        this.editDialogVisible = false;
        this.fetchApplications();
      } catch (error) {
        this.$message.error('更新失败');
      }
    },
    async handleDelete(id) {
      try {
        await this.$request.post(`/admin/removeResource?id=${encodeURIComponent(id)}`);
        this.$message.success('资源申请记录删除成功！');
        // 4. 刷新当前项目数据
        await this.fetchApplications();
      } catch (error) {
        this.$message.error('删除失败');
      }
    }
  }
};
</script>

<style scoped>
.management-card {
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
.data-table {
  margin-top: 20px;
}
</style>